<route>
{
  "meta":{
  "title":"升级通知记录",
  "showMenu":true,
  "serialNum": 20,
  "localism": "sys.upgrade_notification_record"
  }
}
</route>

<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input
          v-model="queryParams.code"
          :placeholder="$t('sys.upgrade_notification_CODE')"
          clearable
          prefix-icon="el-icon-search"
        />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="loadData(1)">{{$t('sys.query')}}</el-button>
        <el-button @click="onReset">{{$t('sys.reset')}}</el-button>
      </el-col>
    </el-row>
    <el-table
      class="mt10"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column prop="code" :label="$t('sys.upgrade_notification_CODE')"/>
      <el-table-column prop="templateCode" :label="$t('sys.message_template_CODE')"/>
      <el-table-column prop="createDate" :label="$t('sys.create_time')">
        <template slot-scope="scope">
          {{ scope.row.createDate | moment }}
        </template>
      </el-table-column>
      <el-table-column prop="cycle" :label="$t('sys.execution_cycle')"/>
      <el-table-column prop="level" :label="$t('sys.upgrade_level')"/>sss
      <el-table-column prop="status" :label="$t('sys.status')">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0">{{$t('sys.closed')}}</span>
          <span v-if="scope.row.status === 1">{{$t('sys.in_execution')}}</span>
          <span v-if="scope.row.status === 2">{{$t('sys.unexecuted')}}</span>
          <el-popconfirm
            :title="$t('sys.confirm_to_close_upgrade_notification')"
            placement="top"
            @confirm="onClose(scope.row)"
          >
            <el-button style="margin-left: 10px" v-if="scope.row.status === 1" class="link-danger" type="text" slot="reference">{{$t('sys.close')}}</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
      <el-table-column prop="actions" :label="$t('sys.operation')" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="$refs.noticeDetailModal.show(scope.row)">{{$t('sys.details')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>
    <notice-detail-modal ref="noticeDetailModal" />
  </div>
</template>

<script>
import { getMsgUpgrademessagePagelist,postMsgUpgrademessageCloseUpgrade } from '@/apis/paas/UpgradeMessageController.js'

import NoticeDetailModal from './__components__/DetailModal'
export default {
  name: 'Notice',

  components: {
    NoticeDetailModal
  },
  data () {
    return {
      appList: [],
      queryParams: {},
      tableData: [],
      loading: false,
      pageData: {
        pageSize: 10,
        pageNo: 1
      },
      total: 0
    }
  },
  computed: {

    trimedQueryParams () {
      const params = Object.assign({}, this.queryParams)
      for (const prop in params) {
        if (params.hasOwnProperty(prop) && typeof params[prop] === 'string') {
          params[prop] = params[prop].trim()
        }
      }
      return params
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.loadData()
    },

    loadData (pageNo = this.pageData.pageNo) {
      this.loading = true
      getMsgUpgrademessagePagelist({
        ...this.queryParams,
        ...this.pageData,
        ...this.trimedQueryParams,
        pageNo
      }).then(res => {
        if (res.data.length === 0 && pageNo > 1) {
          this.loadData(pageNo - 1)
          return
        }
        this.tableData = res.data
        this.total = res.totalCount
        this.pageData = {
          pageSize: res.pageSize,
          pageNo: res.pageNo
        }
      }).finally(() => {
        this.loading = false
      })
    },

    onClose (record) {
      // type: 1
      postMsgUpgrademessageCloseUpgrade({ id: record.id }).then(res => {
        this.loadData()
      })
    },

    onReset () {
      this.queryParams = {}
      this.loadData(1)
    }
  }
}
</script>

<style></style>
